<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 绘制阴影</title>
    <style>
      body{
        background: #666;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      canvas{
        background: #fff;
      }
      h1{
        color: #fff;
        font-size: 24px;
      }
    </style>
</head>
<body>
    <!-- 
      
    -->
    <h1>阴影</h1>
    <canvas id="drawing" width="500" height="500" ></canvas>
    <script>
         var drawing = document.getElementById('drawing')
         if (drawing.getContext) {
            const ctx = drawing.getContext('2d');
            
            const drawTable = () => {
                for (let i = 0; i < drawing.width / 10; i++) {
                    let speed = 20;
                    ctx.beginPath();
                    // row
                    ctx.moveTo(0, i * speed);             //创建一个起点
                    ctx.lineTo(drawing.width, i * speed);
                    // column
                    ctx.moveTo(i * speed, 0);
                    ctx.lineTo(i * speed, drawing.height);
                    ctx.strokeStyle = 'rgba(0,0,0,.2)';
                    ctx.stroke();
                    ctx.closePath();
                }
            }
            drawTable()

            
            // 绘制阴影
            ctx.shadowColor = 'rgba(0,0,0,.5)'
            // 阴影偏移量
            ctx.shadowOffsetX = 50
            ctx.shadowOffsetY = 50
            // 阴影的模糊像素
            ctx.shadowBlur = 5


            ctx.fillRect(150, 150,150,150)

         }
    </script>
</body>
</html>
